// resources in description
const mainTabs = document.querySelector(".main-tabs");
const mainSliderCircle = document.querySelector(".main-slider-circle");
const roundButtons = document.querySelectorAll(".round-button");

const colors = {
    blue: {
        50: {
            value: "#e3f2fd"
        },
        100: {
            value: "#bbdefb"
        }
    },
    green: {
        50: {
            value: "#e8f5e9"
        },
        100: {
            value: "#c8e6c9"
        }
    },
    purple: {
        50: {
            value: "#f3e5f5"
        },
        100: {
            value: "#e1bee7"
        }
    },
    orange: {
        50: {
            value: "#ffe0b2"
        },
        100: {
            value: "#ffe0b2"
        }
    },
    red: {
        50: {
            value: "#ffebee"
        },
        100: {
            value: "#ffcdd2"
        }
    }
};

const getColor = (color, variant) => {
    return colors[color][variant].value;
};

const handleActiveTab = (tabs, event, className) => {
    tabs.forEach((tab) => {
        tab.classList.remove(className);
    });

    if (!event.target.classList.contains(className)) {
        event.target.classList.add(className);
    }
};

mainTabs.addEventListener("click", (event) => {
    const root = document.documentElement;
    const targetColor = event.target.dataset.color;
    const targetTranslateValue = event.target.dataset.translateValue;

    if (event.target.classList.contains("round-button")) {
        mainSliderCircle.classList.remove("animate-jello");
        void mainSliderCircle.offsetWidth;
        mainSliderCircle.classList.add("animate-jello");

        root.style.setProperty("--translate-main-slider", targetTranslateValue);
        root.style.setProperty("--main-slider-color", getColor(targetColor, 50));
        root.style.setProperty("--background-color", getColor(targetColor, 100));

        handleActiveTab(roundButtons, event, "active");

        if (!event.target.classList.contains("gallery")) {
            root.style.setProperty("--filters-container-height", "0");
            root.style.setProperty("--filters-wrapper-opacity", "0");
        } else {
            root.style.setProperty("--filters-container-height", "3.8rem");
            root.style.setProperty("--filters-wrapper-opacity", "1");
        }
    }
});

const filterTabs = document.querySelector(".filter-tabs");
const filterButtons = document.querySelectorAll(".filter-button");

filterTabs.addEventListener("click", (event) => {
    const root = document.documentElement;
    const targetTranslateValue = event.target.dataset.translateValue;

    if (event.target.classList.contains("filter-button")) {
        root.style.setProperty("--translate-filters-slider", targetTranslateValue);
        handleActiveTab(filterButtons, event, "filter-active");
    }
});
